<template>
	<view class="">
		<u-sticky>
			<view class="tabs_box">
				<u-tabs :scrollable="false" keyName="dictLabel" :list="tabsList" @click="handleTabs"
					:current="currentIndex" barHeight="6rpx" barMarginBottom="20rpx"></u-tabs>
			</view>
			<view class="tabs_box_info"  v-if="currentIndex === 1">
				<view class="card-header">
					<text class="card-title">检查确认点</text>
					<text class="card-name">{{pageItemInfo.detailName}}</text>
				</view>
				<!-- 信息展示区域（后台返回，不可编辑） -->
				<view class="info-section">
					<view class="item_info">
						<view class="item_info_con">
							<text class="item_info_con_l">对象：</text>
							<text class="item_info_con_r">{{pageItemInfo.detailObject }}</text>
						</view>
						<view class="item_info_con">
							<text class="item_info_con_l">方法与基准</text>
							<text class="item_info_con_r">{{pageItemInfo.method }}</text>
						</view>
						<view class="item_info_con">
							<text class="item_info_con_l">字段确认</text>
							<text class="item_info_con_r">{{pageItemInfo.fieldConfirm }}</text>
						</view>
						<view class="item_info_con">
							<text class="item_info_con_l">检查手段：</text>
							<text class="item_info_con_r">{{pageItemInfo.checkWay }}</text>
						</view>
						<view class="item_info_con">
							<text class="item_info_con_l">确认方式：</text>
							<text class="item_info_con_r">{{pageItemInfo.methodExplain }}</text>
						</view>
					</view>
				</view>
			</view>
		</u-sticky>

		<view class="form-container" v-if="currentIndex === 0">

			<u-form :model="formData" ref="form" labelPosition="left" labelWidth="180rpx">
				<view class="form-item-card" v-for="(item, index) in formData.formList" :key="index">
					<!-- 卡片标题 -->
					<view class="card-header">
						<text class="card-title">检查确认点</text>
						<text class="card-name">{{item.detailName}}</text>
					</view>
					<!-- 信息展示区域（后台返回，不可编辑） -->
					<view class="info-section">
						<view class="item_info">
							<view class="item_info_con">
								<text class="item_info_con_l">对象：</text>
								<text class="item_info_con_r">{{item.detailObject }}</text>
							</view>
							<view class="item_info_con">
								<text class="item_info_con_l">方法与基准</text>
								<text class="item_info_con_r">{{item.method }}</text>
							</view>
							<view class="item_info_con">
								<text class="item_info_con_l">字段确认</text>
								<text class="item_info_con_r">{{item.fieldConfirm }}</text>
							</view>
							<view class="item_info_con">
								<text class="item_info_con_l">检查手段：</text>
								<text class="item_info_con_r">{{item.checkWay }}</text>
							</view>
							<view class="item_info_con">
								<text class="item_info_con_l">确认方式：</text>
								<text class="item_info_con_r">{{item.methodExplain }}</text>
							</view>
						</view>
					</view>
					<!-- 填写区域：根据后台type和配置数据，展示对应填写组件 -->
					<view class="input-section" v-for="(d_item, d_index) in item.childList"
						:id="`input-section-${index}-${d_index}`">
						<!-- 单选类型：展示已配置的options，直接选择 -->
						<template v-if="d_item.type === '1'">
							<u-form-item :label="d_item.childName" :prop="`${index}.result`">
								<u-radio-group :disabled="!checkStatus" v-model="d_item.value">
									<u-radio :customStyle="{marginRight: '8px'}"
										v-for="opt in safeSplitOptions(d_item.options,index,d_index)" :key="opt"
										:label="opt" :name="opt">{{ opt }}</u-radio>
								</u-radio-group>
							</u-form-item>
							<!-- <view style="display: flex;align-items: center;"
								v-if="d_item.value  && d_item.value!==d_item.correct">
								<u--textarea :disabled="!checkStatus" v-model="d_item.abnormalContent" type="text"
									placeholder="请填写异常原因或数据"></u--textarea>
								<text v-if="d_item.unit">({{d_item.unit}})</text>
							</view> -->
							<u-form-item label="异常原因" v-if="d_item.value  && d_item.value!==d_item.correct">
								<u--textarea style="width: 220px;" v-model="d_item.abnormalContent" type="text"
									placeholder="请填写异常原因或数据"></u--textarea>
							</u-form-item>

						</template>
						<!-- 多选类型：展示已配置的options，直接选择 -->
						<template v-if="d_item.type === '2'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.result`">
								<u-checkbox-group :disabled="!checkStatus" v-model="d_item.value">
									<u-checkbox :customStyle="{marginRight: '8px'}"
										v-for="opt in d_item.options.split('/')" :key="opt" :label="opt"
										:name="opt">{{ opt }}</u-checkbox>
								</u-checkbox-group>
							</u-form-item>
						</template>
						<!-- 数值类型：展示已配置的上下限，输入数值 -->
						<template v-if="d_item.type === '3'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.value`">
								<u-input style="width: 220px;" :disabled="!checkStatus" v-model.number="d_item.value"
									type="number" placeholder="请输入测量值">
									<u--text v-if="d_item.unit" :text="d_item.unit" slot="suffix" margin="0 0 0 3px"
										type="tips"></u--text>
								</u-input>
							</u-form-item>
							<u-form-item label="异常原因"
								v-if="d_item.value && d_item.upperLimit && d_item.lowerLimit && (d_item.value > d_item.upperLimit || d_item.value < d_item.lowerLimit)">
								<u--textarea style="width: 220px;" v-model="d_item.abnormalContent" type="text"
									placeholder="请填写异常原因或数据"></u--textarea>
							</u-form-item>


						</template>
						<!-- 文本类型：直接输入文本 -->
						<template v-if="d_item.type === '4'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.value`">
								<view style="display: flex;align-items: center;">
									<!-- <u--textarea :disabled="!checkStatus" v-model="d_item.value" type="text"
										placeholder="请输入内容">
									</u--textarea>
									<text v-if="d_item.unit">({{d_item.unit}})</text> -->
									<u-input style="width: 220px;" :disabled="!checkStatus"
										v-model.number="d_item.value" type="number" placeholder="请输入测量值">
										<u--text v-if="d_item.unit" :text="d_item.unit" slot="suffix" margin="0 0 0 3px"
											type="tips"></u--text>
									</u-input>
								</view>
							</u-form-item>


						</template>
						<!-- 日期类型：选择日期 -->
						<template v-if="d_item.type === '5'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.value`">
								<uni-datetime-picker style="width: 220px;" :disabled="!checkStatus" type="date"
									:clear-icon="true" v-model="d_item.value" />
							</u-form-item>
						</template>
						<!-- 时间类型：选择时间 -->
						<template v-if="d_item.type === '6'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.value`">
								<uni-datetime-picker style="width: 220px;" :disabled="!checkStatus" type="datetime"
									:clear-icon="true" v-model="d_item.value" />
							</u-form-item>
						</template>
						<!-- 附件类型：上传附件 -->
						<template v-if="d_item.type === '7'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.file`">
								<file-upload :disable="!checkStatus" style="margin-top: 12px;" accept="file"
									@updataFile="updataImage($event,d_item)"></file-upload>
							</u-form-item>
						</template>
						<!-- 拍照类型：拍摄照片 -->
						<template v-if="d_item.type === '8'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.file`">
								<file-upload :disable="!checkStatus" style="margin-top: 12px;"
									@updataFile="updataImage($event,d_item)"></file-upload>
							</u-form-item>
						</template>
						<template v-if="d_item.type === '9'">
							<u-form-item :label="d_item.childName" :prop="`${d_index}.file`">
								<file-upload :disable="!checkStatus" style="margin-top: 12px;"
									@updataFile="updataImage($event,d_item)"></file-upload>
							</u-form-item>
						</template>
					</view>
				</view>
			</u-form>

			<!-- 提交按钮 -->
			<!--    <u-button type="primary" class="submit-btn" @click="handleSubmit">
				提交所有填写内容
			</u-button> -->
			<bottom-button v-if="checkStatus" @click="handleSubmit"></bottom-button>
		</view>
		<view class="form-record" v-else-if="currentIndex === 1">
		
			<u-collapse>
				<!-- 外层折叠面板：按提交记录分组 -->
				<u-collapse-item :title="`${pageItemInfo.fieldConfirm}`" :value="item.fillCode"
					v-for="item in recordList" :key="item.fillCode" :name="item.fillCode">

					<!-- 子项记录（和表单的 input-section 一一对应） -->
					<view class="input-section" v-for="(childItem, childIdx) in item.childRecords" :key="childIdx">
						<!-- 子项标签（和表单的 form-item label 一致） -->
						<!-- 子项内容（按类型展示，和表单组件对应） -->
						<view class="child-content">
							<view class="child-content-item">
								<view class="child-label"
									:style="{marginBottom: childItem.type === '3' || childItem.type === '4' ? '10rpx' : '0'}">
									<text class="label-text">{{childItem.childName}}:</text>
								</view>
								<!-- 单选/多选/文本/日期/时间 类型 -->
								<template
									v-if="childItem.type === '1' || childItem.type === '2' || childItem.type === '4' || childItem.type === '5' || childItem.type === '6'">
									<view class="text-content">
										{{childItem.results || '---'}}
										<text v-if="childItem.unit"> ({{childItem.unit}})</text>
									</view>
								</template>

								<!-- 数值类型（展示结果+单位） -->
								<template v-if="childItem.type === '3'">
									<view class="text-content">
										{{childItem.results || '---'}}
										<text v-if="childItem.unit"> {{childItem.unit}}</text>
										<text class="range-tip" v-if="childItem.lowerLimit || childItem.upperLimit">
											（标准范围：{{childItem.lowerLimit || 0}}-{{childItem.upperLimit || '∞'}}）
										</text>
									</view>
								</template>

								<!-- 附件/拍照/拍照确认 类型 -->
								<template
									v-if="childItem.type === '7' || childItem.type === '8' || childItem.type === '9'">
									<file-upload :biz-type="childItem.type === '7' ? 'product_fill_file' : ''"
										:bizId="childItem.fillId" :disable="true" :fileIds="childItem.results"
										:accept="childItem.type === '7' ? 'file' : ''"
										style="margin-top: 0;"></file-upload>
								</template>


							</view>


							<!-- 异常原因（有异常时展示，和表单一致） -->
							<view class="abnormal-section"
								v-if="childItem.isAbnormal === '1' || childItem.isAbnormal === 1">
								<view class="abnormal-label">异常原因：</view>
								<view class="abnormal-content">{{childItem.abnormalContent || '---'}}</view>
							</view>
						</view>
					</view>
				</u-collapse-item>
			</u-collapse>

			<u-empty mode="list" style="padding-top: 100rpx;" text="暂无数据" v-if="!recordList.length">
			</u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getStepByStepId,
		getProductServiceByItemId,
		completeProduct,
		getProductServiceFillList,
		getFileList
	} from "@/common/api.js"
	import bottomButton from "@/components/bottomButton.vue";
	import fileUpload from "@/components/fileUpload.vue";
	export default {
		components: {
			bottomButton,
			fileUpload,
		},
		data() {
			return {
				taskId: '',
				currentIndex: 0,
				stepId: '',
				checkStatus: true,
				productId: '',
				formData: {
					formList: [],
				},
				recordList: [],
				info: {
					frequencyType: '', // 类型 1循环 2多次 3单词
					frequency: '', // 频次
				},
				tabsList: [{
						dictLabel: '表单填写',
						dictValue: '1'
					},
					{
						dictLabel: '填写记录',
						dictValue: '2'
					}
				],
				// 类型选项列表（保持原始）
				typeOptions: [{
						value: "1",
						label: "单选"
					},
					{
						value: "2",
						label: "多选"
					},
					{
						value: "3",
						label: "数值"
					},
					{
						value: "4",
						label: "文本"
					},
					{
						value: "5",
						label: "日期"
					},
					{
						value: "6",
						label: "时间"
					},
					{
						value: "7",
						label: "附件"
					},
					{
						value: "8",
						label: "拍照"
					},
					{
						value: "9",
						label: "拍照确认"
					},
				],

				pageItemInfo: {},
			};
		},
		onLoad(e) {
			const item = JSON.parse(decodeURIComponent(e.item));
			// console.log(item, 'item');
			this.pageItemInfo = item || null
			this.taskId = item.taskId || ''
			this.productId = item.productId || ''
			this.checkStatus = item.checkStatus === true ? true : false
			this.getInfo()
		},
		methods: {

			// 安全分割选项字符串
			safeSplitOptions(options, index, d_index) {
				// 检查是否为有效字符串
				if (typeof options !== 'string' || options.trim() === '') {
					// console.log(options,'optionsoptions');
					// console.log(index,d_index,'optionsoptions');
					return []; // 返回空数组避免v-for报错
				}
				// 分割并过滤空项（可选，根据需求决定）
				return options.split('/').filter(opt => opt.trim() !== '');
			},
			updataImage(e, item) {
				// console.log(e, 'eee');
				// console.log(item, 'item');
				item.value = e
				// this.$refs.uForm.validateField('upload_file1')
			},
			async getInfo() {
				let that = this
				let res = await getProductServiceByItemId({
					taskId: this.taskId
				})
				if (res.code == '00000') {
					this.info = res.data


					let list = [{
						...this.pageItemInfo,
						childList: res.data
					}]

					this.formData.formList = list.map(item => {
						// 处理子列表，根据type设置不同的value
						item.childList = (item.childList || []).map(c_item => {
							let value;
							// 判断类型（注意：这里假设type是字符串类型，若为数字则去掉引号）
							if (c_item.type === '5') {
								// 类型5：当前日期（YYYY-MM-DD）
								const date = new Date();
								value =
									`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
							} else if (c_item.type === '6') {
								// 类型6：当前时间（YYYY-MM-DD HH:MM:SS）
								const date = new Date();
								value =
									`${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
							} else {
								// 其他类型：使用correct的值，默认null
								value = c_item.correct ?? null;
							}
							return {
								...c_item,
								value
							};
						});

						// 处理父级item的value
						return {
							...item,
							value: item.correct ?? null,
							abnormalContent: '',
							isAbnormal: 0
						};
					});
					this.getRecordList(res.data[0]['productId'])
				}
			},
			async getRecordList() {
				let that = this;
				let res = await getProductServiceFillList({
					taskId: this.taskId,
					productId: this.productId
				});

				if (res.code === '00000' && res.data && res.data.length) {
					// 1. 先从表单数据中构建 childId 到完整配置的映射（便于快速查找）
					const childConfigMap = {};
					// 遍历表单主项
					this.formData.formList.forEach(mainItem => {
						// 遍历子项，存储 childId 对应的完整配置
						(mainItem.childList || []).forEach(childItem => {
							if (childItem.childId) {
								childConfigMap[childItem.childId] = childItem;
							}
						});
					});

					// 2. 创建映射对象，用于按 fillCode 分组
					const groupMap = {};

					// 3. 遍历原始记录数据，归类并合并表单配置
					res.data.forEach(record => {
						const {
							fillCode,
							childId
						} = record;
						// 如果该 fillCode 未创建分组，则初始化
						if (!groupMap[fillCode]) {
							groupMap[fillCode] = {
								fillCode: fillCode,
								childRecords: []
							};
						}

						// 从表单配置中匹配当前 childId 对应的完整数据（如 childName、type、unit 等）
						const matchedConfig = childConfigMap[childId] || {};

						// 合并记录数据和表单配置数据（记录数据优先级更高，覆盖配置中的同名字段）
						const mergedRecord = {
							...matchedConfig, // 表单配置数据（childName、type、unit、lowerLimit 等）
							...record // 记录数据（results、isAbnormal、abnormalContent 等）
						};

						// 将合并后的数据加入对应分组
						groupMap[fillCode].childRecords.push(mergedRecord);
					});

					// 4. 将映射对象转换为最终数组
					this.recordList = Object.values(groupMap);
					console.log('合并表单配置后的记录：', this.recordList);
				}
			},


			handleTabs(e) {
				this.currentIndex = e.index
			},
			// 数值范围验证（需在上下限之间）
			validateRange(rule, value, callback, index) {
				const item = this.formList[index];
				if (value < item.lowerLimit || value > item.upperLimit) {
					callback(new Error(`请输入${item.lowerLimit}-${item.upperLimit}之间的数值`));
				} else {
					callback();
				}
			},
			// 提交表单
			handleSubmit() {
				const formList = this.formData.formList;
				let errorMsg = '';
				let errorElementId = ''; // 存储错误元素的id
				let hasError = false;
				const submitData = []; // 存储最终提交的所有子项数据

				// 1. 遍历主检查项（formList）
				for (let i = 0; i < formList.length; i++) {
					const mainItem = formList[i];
					const mainCheckIndex = i + 1; // 主检查项序号（从1开始）

					// 2. 遍历当前主项的所有子项（childList）
					for (let j = 0; j < mainItem.childList.length; j++) {
						const childItem = mainItem.childList[j];
						const childCheckIndex = `${mainCheckIndex}-${j + 1}`; // 子项序号（如 1-1、1-2）
						// 生成当前子项的唯一id
						const currentId = `input-section-${i}-${j}`;
						// 3. 基础必填项校验（按子项类型校验 value）
						switch (childItem.type) {
							case '1': // 单选
								if (childItem.value === '' || childItem.value === undefined || childItem.value === null) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请选择结果`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '2': // 多选
								if (!childItem.value || childItem.value.length === 0) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请至少选择一个结果`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '3': // 数值
								if (childItem.value === '' || childItem.value === undefined || childItem.value === null) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请输入测量值`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '4': // 文本
								if (!childItem.value) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请填写内容`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '5': // 日期
								if (!childItem.value) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请选择日期`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '6': // 时间
								if (!childItem.value) {
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请选择时间`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
							case '7': // 附件
							case '8': // 拍照
							case '9': // 拍照确认
								if (!childItem.value || childItem.value.length === 0) {
									const tip = childItem.type === '7' ? '拍摄附件' : '拍摄照片';
									errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请${tip}`;
									hasError = true;
									errorElementId = currentId;
								}
								break;
						}

						// 4. 异常状态校验（异常时必须填写原因）
						if (!hasError) {
							let isAbnormal = 0;
							// 根据子项类型判定异常
							if (childItem.type === '1') {
								// 单选：不等于正确值则异常
								isAbnormal = childItem.value && childItem.value !== childItem.correct ? 1 : 0;
							} else if (childItem.type === '3') {
								// 数值：超出上下限则异常
								isAbnormal = childItem.value && (childItem.value > childItem.upperLimit || childItem
									.value < childItem.lowerLimit) ? 1 : 0;
							}

							// 异常但未填原因 → 报错
							if (isAbnormal === 1 && !childItem.abnormalContent) {
								errorMsg = `检查项${childCheckIndex}（${childItem.childName}）：请填写异常原因`;
								hasError = true;
								errorElementId = currentId;
							}
						}

						// 发现错误立即提示并终止
						if (hasError) {
							this.$commonFn.msg(errorMsg);
							// 滚动到错误位置
							this.scrollToError(errorElementId);
							return;
						}

						// 5. 收集当前子项的提交数据
						let submitValue = '';
						let isAbnormal = 0;

						switch (childItem.type) {
							case '1': // 单选
								isAbnormal = childItem.value && childItem.value !== childItem.correct ? 1 : 0;
								submitValue = childItem.value;
								break;
							case '2': // 多选（数组转字符串）
								submitValue = childItem.value.join(',');
								break;
							case '3': // 数值
								isAbnormal = childItem.value && (childItem.value > childItem.upperLimit || childItem
									.value < childItem.lowerLimit) ? 1 : 0;
								submitValue = childItem.value;
								break;
							case '7': // 附件
							case '8': // 拍照
							case '9': // 拍照确认（复用拍照逻辑）
								// 取fileId拼接字符串
								submitValue = childItem.value.map(file => file.fileId).join(',');
								break;
							default: // 文本/日期/时间（直接取value）
								submitValue = childItem.value;
								break;
						}

						// 存入提交数据数组
						submitData.push({
							productId: mainItem.productId || this.productId,
							projectId: mainItem.projectId,
							stepId: mainItem.stepId,
							taskId: mainItem.taskId,
							itemId: mainItem.itemId,
							childId: childItem.childId || '', // 子项ID（需确保后台返回该字段，无则留空）
							childName: childItem.childName, // 子项名称
							product_fill_file: ['7', '8', '9'].includes(childItem.type) ? submitValue :
							'', // 附件/照片单独存储
							results: submitValue, // 结果统一存储
							isAbnormal: isAbnormal,
							abnormalContent: isAbnormal === 1 ? childItem.abnormalContent : '',
						});
					}
				}
				// console.log(submitData, 'submitData');
				// return
				// 6. 提交请求（传入所有子项数据）
				uni.showLoading({
					title: '提交中',
					mask: true
				});

				completeProduct(JSON.stringify(submitData), {
					header: {
						'Content-Type': 'application/json'
					}
				}).then(ord => {
					this.$commonFn.msg('提交成功');
					this.getInfo(); // 重新拉取数据刷新表单
					uni.hideLoading();
					setTimeout(() => this.$commonFn.Navback(), 500);
				}).catch(err => {
					uni.hideLoading();
					this.$commonFn.msg('提交失败，请重试');
				});
			},
			// 滚动到错误元素位置
			scrollToError(elementId) {
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					// 链式调用：先获取元素位置，再获取视口滚动距离
					query.select(`#${elementId}`).boundingClientRect()
						.selectViewport().scrollOffset()
						.exec((res) => {
							// res[0] 是元素位置信息，res[1] 是视口滚动信息
							if (res && res[0] && res[1]) {
								const elementRect = res[0];
								const scrollData = res[1];

								// 计算目标滚动位置（元素顶部距离视口顶部的距离 + 已滚动距离 - 偏移量）
								const targetScrollTop = scrollData.scrollTop + elementRect.top - 120;

								// 避免滚动到负数位置
								const finalScrollTop = Math.max(0, targetScrollTop);

								uni.pageScrollTo({
									scrollTop: finalScrollTop,
									duration: 300
								});
							}
						});
				}, 100);
			}
		}
	};
</script>
<style>
	page {
		/* background-color: #fff;
		background: #fff; */
	}
</style>
<style scoped lang="scss">
	.red {
		color: #fa3534;
	}

	.green {
		color: #19be6b;
	}

	::v-deep .u-steps-item__wrapper {
		background-color: #f5f7fa !important;
	}
	.tabs_box_info{
		background-color: #fff;
		padding: 10px 15px;
		margin-bottom: 20px;
	}

	.record-card {
		box-sizing: 0 2px 12px 0 rgba(0, 0, 0, .1);
		border-radius: 4px;
		border: 1px solid #ebeef5;
		background-color: #fff;
		overflow: hidden;
		color: #303133;
		transition: .3s;
		padding: 24rpx;
		margin: 12rpx 0;
	}

	.record-card-item {
		margin-bottom: 8rpx;
		color: #606266;
		font-size: 14px;
		display: flex;

		&>text:first-child {
			width: 160rpx;
			display: inline-block;
			flex-shrink: 0;
		}
	}

	.tabs_box_search {
		padding: 16rpx 32rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

	}

	.tabs_box {
		background-color: #fff;
		position: sticky;
		position: -webkit-sticky;
		top: 0;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05); // 顶部栏阴影
	}

	.form-container {
		padding: 20rpx;
		background-color: #f5f7fa;
	}

	.form-record {
		// padding: 20rpx;
		background-color: #fff;
	}

	.form-item-card {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.card-header {
		margin-bottom: 20rpx;
		padding-bottom: 15rpx;
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex-shrink: 0;
		width: 200rpx;
		padding-right: 20px;
	}

	.card-name {
		font-size: 28rpx;
		color: #606266;
		// padding-left: 20px;
	}

	.info-section {
		margin-bottom: 30rpx;
		background-color: #fff;
	}

	.input-section {
		// padding-top: 10rpx;
		// padding-left: 15px;
		background-color: #fff;
	}

	.file-preview {
		margin-top: 10rpx;
		padding: 10rpx;
		background-color: #f5f7fa;
		border-radius: 6rpx;
	}

	.file-name {
		font-size: 26rpx;
		color: #666;
	}

	.submit-btn {
		width: 90%;
		margin: 20rpx auto 140rpx;
		display: block;
	}

	::v-deep .u-cell__body__content {
		flex-shrink: 0 !important;
	}

	.item_info {
		&_con {
			display: flex;
			justify-content: space-between;
			font-size: 28rpx;
			margin-bottom: 6px;
			color: #606266;

			&:last-child {
				margin-bottom: 0;
			}

			&_l {
				width: 200rpx;
				flex-shrink: 0;
				padding-right: 20px;
			}

			&_r {}
		}
	}

	// 子项标签样式（和表单 form-item label 一致）
	.child-label {
		flex-shrink: 0;

		.label-text {
			font-size: 28rpx;
			color: #606266;
			margin-bottom: 10rpx;
			display: inline-block;
		}
	}

	// 子项内容样式（和表单输入组件对齐）
	.child-content {
		// background-color: #f5f7fa;
		border-radius: 8rpx;
		padding: 16rpx;
		margin-bottom: 20rpx;

		&-item {
			display: flex;
			justify-content: space-between;
		}

		.text-content {
			font-size: 28rpx;
			color: #303133;
			line-height: 1.5;
		}

		.range-tip {
			font-size: 24rpx;
			color: #909399;
			margin-left: 8rpx;
		}
	}

	// 异常区域样式（和表单异常输入框对齐）
	.abnormal-section {
		margin-top: 16rpx;
		padding-top: 16rpx;
		// border-top: 1px solid #eee;
		display: flex;
		justify-content: space-between;

		// align-items: center;
		.abnormal-label {
			font-size: 26rpx;
			color: #fa3534;
			// margin-bottom: 8rpx;
			display: inline-block;
			flex-shrink: 0;
		}

		.abnormal-content {
			font-size: 26rpx;
			color: #606266;
		}
	}

	// 去除折叠面板默认内边距，和表单对齐
	::v-deep .u-collapse-item__content {
		// padding: 10rpx !important;
	}

	// 确保记录模块的卡片和表单卡片样式一致
	::v-deep .form-record .form-item-card {
		margin: 0 10rpx 20rpx;
		padding: 20rpx;
	}

	::v-deep .u-form-item__body__right {
		flex: none;
	}

	::v-deep .u-form-item__body {
		justify-content: space-between;
	}
</style>